<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>趣淘新声</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f5f5f5;
            color: #333;
            font-size: 14px;
        }
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            background-color: #fff;
            display: flex;
            align-items: center;
            padding: 0 15px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }

        .header-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }

        .screen-bar {
            position: fixed;
            top: 44px;
            left: 0;
            right: 0;
            height: 40px;
            background-color: #fff;
            display: flex;
            align-items: center;
            padding: 0 15px;
            border-bottom: 1px solid #eee;
            z-index: 99;
        }
        .screen-item {
            margin-right: 15px;
            font-size: 14px;
        }
        .screen-item.active {
            color: #008800;
        }
        .screen-more {
            display: flex;
            align-items: center;
        }
        .screen-more span {
            margin-left: 5px;
        }
        .content {
            margin-top: 84px;
        }
        .news-item {
            background-color: #fff;
            padding: 15px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }
        .news-item:last-child {
            border-bottom: none;
        }
        .news-content {
            flex: 1;
        }
        .news-title {
            font-size: 16px;
            margin-bottom: 8px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .news-time {
            color: #999;
            font-size: 12px;
            margin-bottom: 8px;
        }
        .news-views {
            color: #999;
            font-size: 12px;
            display: flex;
            align-items: center;
        }
        .news-image {
            width: 120px;
            height: 80px;
            background-color: #eee;
            border-radius: 4px;
            overflow: hidden;
        }
        .news-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .add-btn {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #00cc00;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 2px 10px rgba(0, 204, 0, 0.3);
            cursor: pointer;
        }
        .bottom-nav {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: 50px;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #eee;
            z-index: 98;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            cursor: pointer;
        }
        .nav-item img {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
        }
    </style>
</head>
<body>
<header>
    <div class="header-title">趣淘新声</div>
</header>
<div class="content" id="newsList">
    <!-- 新闻列表动态生成 -->
</div>
<div class="add-btn" onclick="location.href='add_news.html'">
    <div class="add-btn-icon">+</div>
</div>

<script>

    // 检查localStorage是否可用
    function isLocalStorageAvailable() {
        try {
            const testKey = '__storage_test__';
            localStorage.setItem(testKey, testKey);
            localStorage.removeItem(testKey);
            return true;
        } catch (e) {
            return false;
        }
    }

    // 跳转到新闻详情页
    function goToDetail(title, time, views) {
        const url = `detail.html?title=${encodeURIComponent(title)}&time=${encodeURIComponent(time)}&views=${encodeURIComponent(views)}`;
        window.location.href = url;
    }

    // 页面加载时检查是否有新添加的新闻
    window.addEventListener('DOMContentLoaded', () => {
        try {
            // 优先检查URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const newsParam = urlParams.get('news');

            if (newsParam) {
                const newsData = JSON.parse(decodeURIComponent(newsParam));
                addNewsItem(newsData);
                // 从URL中移除参数但不刷新页面
                history.replaceState({}, document.title, window.location.pathname);
                return;
            }

            // 再检查localStorage
            if (isLocalStorageAvailable()) {
                const newNews = localStorage.getItem('newNews');
                if (newNews) {
                    const newsData = JSON.parse(newNews);
                    addNewsItem(newsData);
                    // 延迟删除以确保新闻项已成功添加
                    setTimeout(() => {
                        localStorage.removeItem('newNews');
                    }, 1000);
                }
            }
        } catch (e) {
            console.error('Failed to load new news:', e);
            // 清除可能损坏的数据
            if (isLocalStorageAvailable()) {
                localStorage.removeItem('newNews');
            }
        }
    });

    // 添加新闻项到列表
    function addNewsItem(newsData) {
        const newsList = document.getElementById('newsList');
        const newNewsItem = document.createElement('div');
        newNewsItem.classList.add('news-item');
        newNewsItem.setAttribute('onclick', `goToDetail('${newsData.title}', '${newsData.time}', '${newsData.views}')`);

        const newsContent = document.createElement('div');
        newsContent.classList.add('news-content');

        const newsTitle = document.createElement('div');
        newsTitle.classList.add('news-title');
        newsTitle.textContent = newsData.title;

        const newsTime = document.createElement('div');
        newsTime.classList.add('news-time');
        newsTime.textContent = newsData.time;

        const newsViews = document.createElement('div');
        newsViews.classList.add('news-views');
        newsViews.innerHTML = `👁️ ${newsData.views}`;

        newsContent.appendChild(newsTitle);
        newsContent.appendChild(newsTime);
        newsContent.appendChild(newsViews);

        const newsImage = document.createElement('div');
        newsImage.classList.add('news-image');

        const img = document.createElement('img');
        img.src = newsData.image;
        img.alt = newsData.title + '配图';
        newsImage.appendChild(img);

        newNewsItem.appendChild(newsContent);
        newNewsItem.appendChild(newsImage);

        newsList.insertBefore(newNewsItem, newsList.firstChild);

        // 添加动画效果
        newNewsItem.style.opacity = '0';
        newNewsItem.style.transform = 'translateY(20px)';
        setTimeout(() => {
            newNewsItem.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
            newNewsItem.style.opacity = '1';
            newNewsItem.style.transform = 'translateY(0)';
        }, 10);
    }

    // 从数据库加载新闻
    function loadNewsFromDatabase(newsJson) {
        const newsArray = JSON.parse(newsJson);
        const newsList = document.getElementById('newsList');

        newsArray.forEach(newsData => {
            addNewsItem(newsData);
        });
    }
</script>
</body>
</html>